<template>
  <div class="process visualBlock">
    <div class="processBar">
      <!-- <div class="goo _1 active">
      </div>
      <div class="split"></div> -->
      <div class="goo _2" :class="{active: step >= 2}">
      </div>
      <div class="split"></div>
      <div class="goo _3" :class="{active: step >= 3}">
      </div>
    </div>
    <div class="maincontent">
      <record-page v-if="step == 2" @success="doSuccess" @fail="doFail"></record-page>
      <div class="success" v-if="step==3" >
        <img src="~static/images/done.png" style="width: 120px; display: block; margin: 0 auto;">
        <div class="text" style="margin: 20px auto;display: block;text-align: center;font-size: 22px;color: green;">完成认证</div>
        <van-button type="primary" to="/nav" style="display:block;margin:0 auto;">点击返回</van-button>
      </div>
    </div>
    
    <!-- <el-popover id="tipbtn"
            placement="left" width="390" trigger="hover">
            <img src="~static/images/tipImg.png" style="width:380px;border: 1px solid;border-radius: 18px;">
            <el-button slot="reference">?</el-button>
          </el-popover> -->
  </div>
</template>

<script>
  import RecordPage from './record';

  export default {
    components: {RecordPage},
    data () {
      return {
        devEnv: process.env == 'development',
        step: 2,
        realbarWidth: 66,
        onProcess: false,
        failMessage: '认证失败',
        vLoading: false
      };
    },
    methods: {
      doFail: function (message) {
        this.step = 0;
        this.$util.speckText(message);
        this.$dialog.alert({
          title: '认证失败',
          message: message
        }).then(() => {
          this.$router.replace({path: '/nav?r=1'});
        });
      },
      doSuccess: function () {
        this.step = 3;
        this.$util.speckText('认证通过', 'success');
        setTimeout(()=> {
          this.$router.push({path: '/nav?r=1'});
        }, 3000);
      },
    },
    mounted: function () {
      this.$util.speckText('基础信息认证', 'jcxxrz');
    }
  };
</script>

<style lang="less">
.visualBlock {
  width: 100vw;
  height: 100vh;
  .maincontent {
    width: 100vw;
    height: calc(100vh - 90px);
    overflow-y: auto;
  }
}
.uploadArea {
  padding: 10pt;
  .title {
    color: #323233;
    font-size: 14px;
    line-height: 24px;
  }
}
.processBar {
  width: 100%;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #65a6f6;
  .split {
    width: 40px;
    height: 3px;
    background: white;
    margin: 0 10px;
  }
  .goo {
    width: calc(90px / 1.9);
    height: calc(119px / 1.9);
    &._1 {
      background: url(~static/images/m/mb5.png);
      background-size: 100% 100%;
    }
    &._3 {
      background: url(~static/images/m/mb6.png);
      background-size: 100% 100%;
      &.active {
        background: url(~static/images/m/mb8.png);
        background-size: 100% 100%;
      }
    }
    &._2 {
      background: url(~static/images/m/mb15.png);
      background-size: 100% 100%;
      &.active {
        background: url(~static/images/m/mb16.png);
        background-size: 100% 100%;
      }
    }
  }
}
</style>